<!DOCTYPE html>
<html lang="en">

<head>
    <title>设备绑定</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/equipment.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
    <style>
        .app_main {
            height: calc(100vh - 70px) !important;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="app_header">
            <div class="app_headerLeft" @click="back">
                <span class="iconfont icon-arrow-left-bold"></span>
            </div>
            <div class="app_headerTitle">绑定供水设备</div>
            <div class="app_headerRight" @click="saveBtn">
                <span>确定</span>
            </div>
        </div>
        <div class="app_main">
            <a href="./equipmentDetail.html">
                <div class="app_mainItem" v-for="(item, index) in 10">
                    <div class="app_mainItemLeft">
                        <div class="stateDom1">使用中</div>
                    </div>
                    <div class="app_mainItemRight">
                        <div class="title str">ALCW智能型无负压供水设备</div>
                        <span class="tabs str">无负压变频供水</span>
                        <div class="note str">所属泵房：奥特莱斯广场泵房1</div>
                    </div>
                    <nut-checkbox v-model="checkbox1"></nut-checkbox>
                </div>
            </a>
            <a href="./equipmentDetail.html">
                <div class="app_mainItem" v-for="(item, index) in 10">
                    <div class="app_mainItemLeft">
                        <div class="stateDom2">闲置中</div>
                    </div>
                    <div class="app_mainItemRight">
                        <div class="title str">ALCW智能型无负压供水设备</div>
                        <div class="tabs str">无负压变频供水</div>
                        <div class="note str">所属泵房：奥特莱斯广场泵房1</div>
                    </div>
                    <nut-checkbox v-model="checkbox1"></nut-checkbox>
                </div>
            </a>
        </div>
        <!-- 设备绑定成功弹窗 -->
        <nut-popup :style="{ width: '70vw',height: '345px' }" v-model="show">
            <div class="popupBox">
                <div class="iamge">
                    <img src="../image/success.png" alt="图片路径异常">
                </div>
                <div class="title">完成</div>
                <div class="tips">设备绑定完成</div>
                <div class="btn" @click="back">返回</div>
            </div>
        </nut-popup>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                tabList: [],
                tabState: 1,
                addressShow: false,
                checkbox1: false,
                show: false,
                itemList: [],
            },
            mounted() {
                this.getTablistInfo()
            },
            methods: {
                back() {
                    window.history.go(-1)
                },
                goEquipmentDetail() {
                    window.location.href = './equipmentDetail.html'
                },
                goAddEquipmentPage() {
                    window.location.href = './addEquipment.html'
                },
                tabSwitch(value, index) {
                    console.log('当前tab点击' + value + '-----' + index)
                },
                getTablistInfo() {
                    axios('../json/tabbar.json').then((res => {
                        let tabList = res.data.data
                        tabList.map((item, index) => {
                            if (item.tabTitle == '设备') {
                                item.curr = true
                            } else {
                                item.curr = false
                            }
                        })
                        this.tabList = tabList
                    }))
                },
                saveBtn() {
                    let arr = new Array
                    let list = this.itemList
                    list.map((item, index) => {
                        if (item.isCheck == true) {
                            arr.push(item)
                        } else {

                        }
                    })
                    this.show = true
                    return false;
                    if (arr.length != 0) {
                        console.log('选中的设备', arr)
                    } else {
                        this.$dialog({
                            id: 'my-dialog',
                            title: "提示",
                            content: "请至少选择一条设备数据",
                            closeBtn: true,  //显式右上角关闭按钮
                            onOkBtn(event) {  //确定按钮点击事件
                                this.close(); //关闭对话框
                            },
                            onCancelBtn(event) {  //取消按钮点击事件，默认行为关闭对话框
                                //return false;  //阻止默认“关闭对话框”的行为
                            },
                            onCloseBtn(event) { //右上角关闭按钮点击事件
                                //return false;  //阻止默认“关闭对话框”的行为
                            },
                        });
                    }
                }
            }
        })
    </script>
</body>

</html>